<template>
  <el-container style="min-height: 100vh">
    <!-- 修改侧边栏导航 -->
    <el-aside width="200px" class="sidebar">
      <div class="sidebar-logo">
        <h2>系统管理后台</h2>
      </div>
      <el-menu
        default-active="teachers"
        class="sidebar-menu"
        @select="handleMenuSelect"
        :unique-opened="true"
      >
        <el-menu-item index="teachers">
          <span>教职工管理</span>
        </el-menu-item>
        <el-menu-item index="merchants">
          <span>商家管理</span>
        </el-menu-item>
        <el-menu-item index="finance">
          <span>财务对账</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区保持不变 -->
    <el-container>
      <el-header class="header">
        <div class="header-title">教职工管理系统</div>
        <el-button 
          type="default" 
          @click="handleLogout"
          class="logout-btn"
        >
          退出登录
        </el-button>
      </el-header>

      <el-main class="main-content">
        <div class="operation-bar">
          <el-button type="primary" @click="handleAdd">新增教职工</el-button>
        </div>
        
        <el-table
          :data="teachers"
          border
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column prop="teacherId" label="工号" align="center" width="100" />
          <el-table-column prop="name" label="姓名" align="center" />
          <el-table-column prop="gender" label="性别" align="center" width="80" />
          <el-table-column prop="department" label="所属部门" align="center" />
          <el-table-column prop="phone" label="联系电话" align="center" width="120" />
          <el-table-column prop="email" label="邮箱" align="center" width="200" />
          <el-table-column label="操作" align="center" width="180">
            <template #default="scope">
              <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="handleDelete(scope.row.teacherId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 新增/编辑弹窗 -->
        <el-dialog
          v-model="isDialogOpen"
          :title="form.teacherId ? '编辑教职工' : '新增教职工'"
          width="500px"
        >
          <el-form
            ref="formRef"
            :model="form"
            :rules="formRules"
            label-width="100px"
          >
            <el-form-item label="工号" prop="teacherId">
              <el-input v-model="form.teacherId" :disabled="!!form.teacherId" />
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select v-model="form.gender" placeholder="请选择性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
            <el-form-item label="所属部门" prop="department">
              <el-input v-model="form.department" placeholder="请输入部门名称" />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="isDialogOpen = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </template>
        </el-dialog>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
// 恢复路由相关引入
import { useRouter } from 'vue-router';

// 在本地数据声明前添加路由实例
const router = useRouter();

import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ElForm } from 'element-plus';

type Teacher = {
  teacherId: string;
  name: string;
  gender: string;
  department: string;
  phone: string;
  email: string;
};

// 新增视图状态管理
const currentView = ref<'teachers' | 'merchants' | 'finance'>('teachers');

// 菜单选择处理
const handleMenuSelect = (index: string) => {
  currentView.value = index as 'teachers' | 'merchants' | 'finance';
};

// 本地数据
const teachers = ref<Teacher[]>([]);
const isDialogOpen = ref(false);
const formRef = ref<InstanceType<typeof ElForm>>();
const form = reactive<Partial<Teacher>>({
  teacherId: '',
  name: '',
  gender: '',
  department: '',
  phone: '',
  email: ''
});

// 表单验证规则
const formRules = reactive({
  teacherId: [{ required: true, message: '工号不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  department: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
});

// 初始化本地数据
onMounted(() => {
  teachers.value = [
    { teacherId: 'T001', name: '王老师', gender: '男', department: '数学系', phone: '13800138000', email: 'wang@edu.cn' },
    { teacherId: 'T002', name: '李老师', gender: '女', department: '计算机系', phone: '13900139000', email: 'li@edu.cn' }
  ];
});

// 操作方法与DishManage.vue保持相同逻辑
const handleAdd = () => {
  formRef.value?.resetFields();
  Object.assign(form, { teacherId: '', name: '', gender: '', department: '', phone: '', email: '' });
  isDialogOpen.value = true;
};

const handleEdit = (row: Teacher) => {
  Object.assign(form, { ...row });
  isDialogOpen.value = true;
};

const handleSubmit = async () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      try {
        if (form.teacherId) {
          const index = teachers.value.findIndex(t => t.teacherId === form.teacherId);
          if (index !== -1) {
            teachers.value[index] = { ...teachers.value[index], ...form } as Teacher;
          }
          ElMessage.success('编辑成功');
        } else {
          const newTeacher = {
            ...form,
            teacherId: `T${String(teachers.value.length + 1).padStart(3, '0')}`
          } as Teacher;
          teachers.value.push(newTeacher);
          ElMessage.success('新增成功');
        }
        isDialogOpen.value = false;
      } catch (error) {
        ElMessage.error('操作失败');
      }
    }
  });
};

const handleDelete = async (teacherId: string) => {
  try {
    await ElMessageBox.confirm('确定要删除该教职工吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    teachers.value = teachers.value.filter(t => t.teacherId !== teacherId);
    ElMessage.success('删除成功');
  } catch (error) {
    // 取消删除不处理
  }
};

// 退出登录（保持与DishManage.vue相同实现）
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    });
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    router.push('/login');
    ElMessage.success('退出成功');
  } catch (error) {
    // 取消退出不处理
  }
};
</script>

<!-- 保持与DishManage.vue相同的样式 -->
<style scoped>
.sidebar {
  background-color: #f5f7fa;
  border-right: 1px solid #e5e7eb;
}
.sidebar-logo {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}
.sidebar-logo h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}
.sidebar-menu {
  margin-top: 10px;
}
.sidebar-menu .el-menu-item.is-active {
  background-color: #e6f7ff;
  color: #1890ff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #fff;
  border-bottom: 1px solid #e5e7eb;
  height: 60px;
}
.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.logout-btn {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

.main-content {
  padding: 20px;
  background-color: #fff;
}
.operation-bar {
  margin-bottom: 10px;
}
</style>